<template>
<div class="">
  <div
    class="
      cursor-pointer
      flex
      justify-start
      transition 
      items-center
      rounded-md
      ease-in-out
      p-1
      my-12
      mt-16
      duration-200
    "
    :class="{'item scale-110 transform': active == 0, 'shadow-xl': active == 0}"
    @click="activeHandler(0)"
  >
    <span  class=" bg-gray-800 h-1 w-5 rounded-xl ml-4"></span>
    <Chip-icon class="ml-7 mr-3 text-white w-6 h-6"></Chip-icon>
    <slot></slot>
    <span class="text-lg text-white tracking-wide">模 组</span>
  </div>
  <div
    class="
      cursor-pointer
      flex
      justify-start
      items-center
      rounded-md
      transition 
      p-1
      my-12
      ease-in-out
      duration-200
    "
    :class="{item : active == 1,'shadow-xl': active == 1,'scale-110': active == 1,transform : active == 1}"
    @click="activeHandler(1)"
  >
    <span  class="bg-gray-800 h-1 w-5 rounded-xl ml-4"></span>
    <Chip-icon class="ml-7 mr-3 text-white w-6 h-6"></Chip-icon>
    <slot></slot>
    <span class="text-lg text-white tracking-wide">设 置</span>
  </div>
  <div
    class="
      cursor-pointer
      flex
      justify-start
      items-center
      rounded-md
      transition 
      ease-in-out
      p-1
      mt-12
      mb-8
      duration-200
      
    "
    :class="{item : active == 2,'shadow-xl transform ': active == 2, 'scale-110':  active == 2}"
    @click="activeHandler(2)"
  >
    <span   class="bg-gray-800 h-1 w-5 rounded-xl ml-4"></span>
    <Chip-icon class="ml-7 mr-3 text-white w-6 h-6"></Chip-icon>
    <span class="text-lg text-white tracking-wide">关 于</span>
  </div>
</div>
</template>

<script>
import { ChipIcon } from "@heroicons/vue/solid";
import { ref } from "vue";
import {useRouter } from 'vue-router';

export default {
  name: "NavMenu",
  components: {
    ChipIcon,
  },
  setup() {
    let active = ref(0);
    let routerpage = ['Home','About']
    let router = useRouter(activeHandler)
    let activeHandler = function(id){
      active.value = id
      router.push({ name: routerpage[id]})
      // console.log(active.value)
    }
    
    return {
      active,
      activeHandler
    }
  },
};
</script>

<style>
.item {
  background-color: rgba(71, 71, 71, 0.5);
}
</style>